import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
  RouteRecordRaw,
} from 'vue-router'
import home from '../view/home/index.vue'
import fruits from '../view/fruits/index.vue'
import book from '@/view/book/index.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: home,
  },
  {
    path: '/fruits',
    name: 'Fruits',
    component: fruits,
  },
  {
    path: '/book',
    name: 'Book',
    component: book,
  },
  {
    path: '/css-pointer-events-map',
    name: 'MapAndCss',
    component: () => import('@/view/css-pointer-events-map/index.vue'),
  },
  {
    path: '/mouse-tracking',
    name: 'MouseTracking',
    component: () => import('@/view/mouse-tracking/index.vue'),
  },
  {
    path: '/css',
    component: () => import('@/view/transition/index.vue'),
    children: [
      {
        path: 'transition',
        name: 'Transition',
        component: () => import('@/view/transition/transition.vue'),
      },
      {
        path: 'animation',
        name: 'Animation',
        component: () => import('@/view/transition/animation.vue'),
      },
      {
        path: 'dom-transition',
        name: 'DomTransition',
        component: () => import('@/view/transition/DomTransition.vue'),
      },
    ],
  },
  {
    path: '/group',
    component: () => import('@/view/transition-group/index.vue'),
    children: [
      {
        path: 'transition',
        name: 'Transition',
        component: () => import('@/view/transition-group/TransitionGroup.vue'),
      },
    ],
  },
  {
    path: '/keep-alive',
    name: 'KeepAlive',
    component: () => import('@/view/keep-alive/index.vue'),
    // meta: { keepAlive: true },
  },
  {
    path: '/teleport',
    name: 'Teleport',
    component: () => import('@/view/teleport/index.vue'),
  },
  {
    path: '/cropper',
    name: 'Cropper',
    component: () => import('@/view/cropper/index.vue'),
  },
]
const router = createRouter({
  // 设置为history模式，就是路径里面没有#,  createWebHashHistory 是默认的，括号里面的就是基础路径，可以理解为项目名称，就是请求路径的基础url
  history: createWebHistory('/yn/'),
  routes,
})
export default router
